<template>
	<div class="admin_header">
		<div class="div1">
			<h3>商城后台管理系统</h3>
			<h4>欢迎进入商城管理系统网站 登录时间：{{time}}</h4>
			<div class="role">
				<img :src="`${this.$ip}/api/public/showimg/${$store.state.img}`"/>
				<el-dropdown>
					<h5 class="el-dropdown-link">
						{{$store.state.name}}<i class="el-icon-arrow-down el-icon--right"></i>
					</h5>
					<el-dropdown-menu slot="dropdown">
						<!-- <el-dropdown-item>{{$store.state.name}}</el-dropdown-item> -->
						<el-button @click="logout()" size="mini">退出登录</el-button>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
	name:'AdminHeader',
	data(){
		return{
			
		}
	},
	methods:{
		...mapActions(['remove']),
		logout(){
			this.remove();
			this.$router.push({path:'/'})
		},
	},
	computed:{
		time(){
			let date =new Date();
			let year =date.getFullYear();
			let month =date.getMonth() + 1;
			let day =date.getDate();
			let hours =date.getHours();
			let minutes =date.getMinutes();
			let k =`${year}-${month}-${day}-${hours}:${minutes}`;
			return k;
		}
	}
}
</script>

<style scoped>
.div1 {
			width: 99vw;
			height: 65px;
			background-color: #34495f;
			color: white;
			display: flex;
			position: relative;
			align-items: center;
			}
			.div1 h3 {
				color: #189F92;
				margin-left: 2vw;
			}
			.div1 h4{
				width: 28vw;
				margin-left: 6vw;
			}
			.div1 .role{
				width: 10vw;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				margin-left: 38vw;
			}
			.div1 .role img{
				width: 2.5vw;
				height: 2.5vw;
				border-radius: 30px;
			}
			.div1 .role h5{
				font-size: 16px;
			}
			.el-dropdown-link {
				cursor: pointer;
				color: white;
			}
			.el-icon-arrow-down {
				font-size: 16px;
			}
</style>
